<template>
  <view class="dynamic-svg-icon" :style="iconStyle">
    <image :src="svgDataUrl" class="svg-container" mode="aspectFit" />
  </view>
</template>

<script>
export default {
  name: 'DynamicSvgIcon',
  props: {
    svgCode: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    },
    width: {
      type: [String, Number],
      default: '1em'
    },
    height: {
      type: [String, Number],
      default: '1em'
    },
    color: {
      type: String,
      default: '#3478F6'
    }
  },
  computed: {
    iconStyle() {
      return {
        width: typeof this.width === 'number' ? `${this.width}px` : this.width,
        height: typeof this.height === 'number' ? `${this.height}px` : this.height,
        display: 'inline-block'
      }
    },
    svgDataUrl() {
      const svgContent = this.svgCode || this.getDefaultSvg()
      const encodedSvg = encodeURIComponent(svgContent)
      return `data:image/svg+xml,${encodedSvg}`
    }
  },
  methods: {
    getDefaultSvg() {
      return "<svg viewBox='0 0 24 24' fill='#3478F6'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/></svg>"
    }
  }
}
</script>

<style scoped>
.dynamic-svg-icon {
  display: inline-block;
  vertical-align: middle;
}

.svg-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg-container :deep(svg) {
  width: 100%;
  height: 100%;
}
</style>